<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 500px;
        height: 500px;
        border: 2px solid #000;
        background-color: red;
        background-image: url("./images/zhuzhu.png");
        background-repeat: no-repeat;
        /* background-position-x: center;
        background-position-y: 0; */
        /* background-position: center; */
        /* background: url("./images/zhuzhu.png") no-repeat 50% 0 red; */
      }

      section {
        width: 100px;
        height: 100px;
        border: solid;
        background-image: url("./images/bg.png");
        background-position: -100px -200px;
      }

      main {
        width: 20px;
        height: 20px;
        border: solid;
        background-image: url("./images/bg2.png");
        background-repeat: no-repeat;
        background-position: -171px -552px;
        /* background-position: -123px -520px; */
      }
      main:hover {
        background-position: -123px -520px;
      }
    </style>
  </head>
  <body>
    <div></div>

    <section></section>

    <main></main>
  </body>
</html>

<!-- 
  背景属性
    background

    background也是一个复合属性

    1. 背景颜色
      backgound-color
      可以填的值和文字颜色一样

    2. 背景图片
      background-image: url("路径");
      当容器比图片大的时候，默认会平铺
      当容器比图片小的时候，默认会裁切

    3. 背景图片的平铺属性
      background-repeat
        repeat: 平铺  默认值
        no-repeat: 不平铺
        repeat-x: 横向平铺
        repeat-y: 纵向平铺

    4. 背景图的位置
      background-position
      两个值 分别表示水平位移和垂直位移 可以是负数
      value + 单位
      百分比
      left/center/right  top/center/bottom




    精灵图/雪碧图
    一个页面如果有很多的小图要用，把所有的小图去做成一个大图
    前端利用背景图和背景平移属性，去显示小图
    减少前后端请求的次数，降低网络的消耗
    前端性能优化

 -->
